<template>
  <div class="log_box">
    <p>注：显示最近10次的登录日志，如果有登录异常，请让管理员小哥哥或者小姐姐为你修改密码</p>
    <ul>
      <li v-for="items of logs" :key="items.index">
        <span class="index">{{items.index}}.</span>
        <span class="date">{{items.createTime | chagneDate}}</span>
        <span class="ip">{{items.ip}}</span>
        <span class="di">{{items.area}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { formatDate } from 'com/data'
export default {
  name: 'UserLog',
  props: {
    logs: Array
  },
  filters: {
    chagneDate: function (time) {
      var data = new Date(time)
      return formatDate(data, 'yyyy-MM-dd')
    }
  },
  mounted () {
    console.log(this.logs)
  }
}
</script>

<style lang="stylus" scoped>
  .log_box{
    width: 100%
    height: 460px
    p{
      margin: 0
      letter-spacing: 1.5px
      color: red
      padding-top: .4rem
      padding-left: .3rem
      box-sizing: border-box
    }
    ul{
      position: relative
      list-style: none
      margin: 0
      padding: 0
      box-sizing: border-box
      padding-left: .3rem
      padding-top: .3rem
      width: 100%
      height: 100%
      li{
        padding-top: .2rem
        padding-bottom: .2rem
        color: black
        span{
          position: relative
        }
        .date{
          left: 60px
        }
        .ip{
          left: 200px
        }
        .di{
          position: absolute
          display: inline-block
          left: 600px
        }
      }
      li:last-child{
        span:nth-child(2){
          left: 51px
        }
        span:nth-child(3){
          left: 191px
        }
      }
      li:nth-child(odd){
        background-color: rgb(220,220,220)
      }
    }
  }
</style>
